<template>
	<view>
		<view :style="{ 'border-bottom': borderBottom ? '2upx solid #efefef' : '' }" class="nav-box">
			<view class="left-box" @click="back()">
				<image src="../../static/images/navigation_btn_back.png" mode="" v-if="showImage"></image>
				<text>{{ title }}</text>
			</view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		title: {
			type: String,
			value: ''
		},
		borderBottom: {
			type: Boolean,
			default: true,
			value: true
		},
		showImage: {
			type: Boolean,
			default: true,
			value: true
		}
	},
	name: 'navBox',
	data() {
		return {};
	},
	methods: {
		// 返回上一页
		back() {
			if (this.$props.showImage) {
				uni.navigateBack({
					delta: 1
				});
			}
		},
	}
};
</script>

<style lang="scss" scoped>
.nav-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22upx 24upx;
	font-size: 32upx;
	color: $color-2b2;
	background: #ffffff;
	.left-box {
		display: flex;
		align-items: center;
		image {
			width: 44upx;
			height: 44upx;
			margin-right: 28upx;
		}
	}
}
</style>
